<template>
    <div class="app-container">
        <el-row>
            <el-col :span="24" class="card-box">
                <el-card>
                    <searchForm @init="init" :searchData="searchData" :searchItem="searchItem"></searchForm>
                </el-card>
            </el-col>
            <el-col :span="24" class="card-box" v-if="rerOption.option">
                <el-card>
                    <div
                        class="el-table el-table--enable-row-hover el-table--medium"
                        style="height: 420px"
                    >
                        <eCharts :option="rerOption"></eCharts>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24" class="card-box" v-else>
                <el-card>
                    <div
                        class="el-table el-table--enable-row-hover el-table--medium"
                        style="height: 420px"
                    >
                        <el-empty description="无数据" />
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24" class="card-box"  v-if="co2concOption.option">
                <el-card>
                    <div
                        class="el-table el-table--enable-row-hover el-table--medium"
                        style="height: 420px"
                    >
                        <eCharts :option="co2concOption"></eCharts>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24" class="card-box"  v-if="co2rhOption.option">
                <el-card>
                    <div
                        class="el-table el-table--enable-row-hover el-table--medium"
                        style="height: 420px"
                    >
                        <eCharts :option="co2rhOption"></eCharts>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24" class="card-box"  v-if="co2tempOption.option">
                <el-card>
                    <div
                        class="el-table el-table--enable-row-hover el-table--medium"
                        style="height: 420px"
                    >
                        <eCharts :option="co2tempOption"></eCharts>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24" class="card-box"  v-if="flowOption.option">
                <el-card>
                    <div
                        class="el-table el-table--enable-row-hover el-table--medium"
                        style="height: 420px"
                    >
                        <eCharts :option="flowOption"></eCharts>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="ChartManage">
import searchForm from "@/components/common/searchForm.vue"
import eCharts from "@/components/common/eCharts.vue"
import { ylLevelInhaleRecordRerList, ylLevelInhaleRecordSensorList } from "@/api/api";
import { formatDate } from '@/utils/index'
import * as echarts from 'echarts';
import { deepClone } from '@/utils/index'
const { proxy } = getCurrentInstance();
const rerOption = ref({})
const sensorOption = ref({})
const co2concOption = ref({})
const co2rhOption = ref({})
const co2tempOption = ref({})
const flowOption = ref({})
const searchItem = ref([
    {
        type: "input",
        label: "用户ID",
        prop: "userId",
        placeholder: "请填写用户ID"
    },
    {
        type: "daterange",
        dateType:'datetime',
        label: "时间",
        timeFormat: "YYYY-MM-DD HH:mm:ss",
        timeList: ["beginDate", "endDate"]
    }
])
const searchData = ref({
    beginDate: "",
    endDate: "",
    userId: ''
})

function getList () {
    proxy.$modal.loading("正在加载数据，请稍候！");
    ylLevelInhaleRecordRerList(searchData.value).then(res => {
        proxy.$modal.closeLoading();
        if (res.data.length>0) {
            let xAxisData = res.data.map((val) => {
                return formatDate(val.createTime)
            })
            let seriesData = res.data.map((val) => {
                return val.tag
            })
            // if (xAxisData.length < 10) {
            //     for (let index = 0; index < 11; index++) {
            //         xAxisData.push(xAxisData[0])
            //         seriesData.push(seriesData[0] + index)
            //     }
            // }
            let option = {
                title: {
                    text: 'RER测量表格'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        // dataView: { readOnly: false },
                        // magicType: { type: ['line', 'bar'] },
                        // restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxisData
                },
                yAxis: {
                    type: 'value',
                },
                dataZoom: [
                    {
                        show: true,
                        type: 'inside',
                        filterMode: 'none',
                        xAxisIndex: [0],
    
                    },
                    {
                        show: true,
                        type: 'inside',
                        filterMode: 'none',
                        yAxisIndex: [0],
                    }
                ],
                series: [
                    {
                        type: 'line',
                        data: seriesData,
                    },
                ]
            };
            rerOption.value = option
        }
    })
    ylLevelInhaleRecordSensorList(searchData.value).then(res => {
        proxy.$modal.closeLoading();
        if(res.data.length>0){
            let option = {
                title: {
                    text: '传感器数据'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value',
                },
                dataZoom: [
                    {
                        show: true,
                        type: 'inside',
                        filterMode: 'none',
                        xAxisIndex: [0],
    
                    },
                    {
                        show: true,
                        type: 'inside',
                        filterMode: 'none',
                        yAxisIndex: [0],
                    }
                ],
                series: [
                    {
                        type: 'line',
                        data: [],
                    },
                ]
            };
            sensorOption.value = option
            // co2conc数据 start
            co2concOption.value = deepClone(option)
            let arrIndex = res.data[0].co2conc.split(',')
            let co2concSeriesData = Array.from(arrIndex.keys())
    
            res.data.forEach((val, index) => {
                let co2concData = val.co2conc.split(',')
                co2concOption.value.series.push({
                    type: 'line',
                    data: co2concData,
                })
            });
            co2concOption.value.xAxis.data = co2concSeriesData
            co2concOption.value.title.text = 'co2conc数据'
            // co2conc数据 end
    
            // co2rh数据 start
            co2rhOption.value = deepClone(option)
            let co2rhIndex = res.data[0].co2rh.split(',')
            let co2rhSeriesData = Array.from(co2rhIndex.keys())
            res.data.forEach((val, index) => {
                let co2rhData = val.co2rh.split(',')
                co2rhOption.value.series.push({
                    type: 'line',
                    data: co2rhData,
                })
            });
            co2rhOption.value.xAxis.data = co2rhSeriesData
            co2rhOption.value.title.text = 'co2rh数据'
            // co2rh数据 end
    
            // co2temp数据 start
            co2tempOption.value = deepClone(option)
            let co2tempIndex = res.data[0].co2temp.split(',')
            let co2tempSeriesData = Array.from(co2tempIndex.keys())
            res.data.forEach((val, index) => {
                let co2tempData = val.co2temp.split(',')
                co2tempOption.value.series.push({
                    type: 'line',
                    data: co2tempData,
                })
            });
            co2tempOption.value.xAxis.data = co2tempSeriesData
            co2tempOption.value.title.text = 'co2temp数据'
            // co2temp数据 end
    
            // flow数据 start
            flowOption.value = deepClone(option)
            let flowIndex = res.data[0].flow.split(',')
            let flowSeriesData = Array.from(flowIndex.keys())
            res.data.forEach((val, index) => {
                let flowData = val.flow.split(',')
                flowOption.value.series.push({
                    type: 'line',
                    data: flowData,
                })
            });
            flowOption.value.xAxis.data = flowSeriesData
            flowOption.value.title.text = 'flow数据'
            // flow数据 end
        }


    })
}
function init () {
    getList();
}
init()
</script>
